<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background: #e84118;
        }
        .search-box{
            /* 整个搜索内容定位到页面中间 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #2f3640;
            height: 40px;
            border-radius: 40px;
            padding: 10px;
        }
        .search-box:hover > .search-txt{
            width: 240px;
            padding: 0 6px ;
        }
        .search-box:hover > .search-btn{
            background: white;
        }

        .search-btn{
            color: #e84118;
            float: right;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #2f3640;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.4s;
        }

        .search-txt{
            border: none;
            background: none;
            outline: none;
            float: left;
            padding: 0;
            color: white;
            font-size: 16px;
            transition: 0.4s;
            /* 使搜索框内文本居中 */
            line-height: 40px;
            width: 0px;
        }


    </style>


</head>

<body>

    <div class="search-box">
        <input class="search-txt" type="text" placeholder="type to search">
        <a class="search-btn" href="#">
            <svg t="1615527983480" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="3783" width="40" height="40">
                <path
                    d="M888.68161 857.569677l-175.091014-175.091014a21.331751 21.331751 0 0 0-30.163096 0c-0.85327 0.85327-1.279905 1.919858-1.919858 2.858454-100.98451 98.382037-259.650076 112.162348-377.699987 32.338935C166.175196 624.669617 129.228603 438.059457 221.424431 301.621576A295.444755 295.444755 0 0 1 357.307687 192.061702a301.716289 301.716289 0 0 1 280.811173 30.632395 301.716289 301.716289 0 0 1 133.238118 248.941537 294.719475 294.719475 0 0 1-22.355675 114.082205 21.331751 21.331751 0 0 0 39.421076 16.297458 336.572371 336.572371 0 0 0 25.598102-130.550317 344.337128 344.337128 0 0 0-152.01006-284.138927A344.294465 344.294465 0 0 0 341.522191 152.512635 337.681622 337.681622 0 0 0 186.056388 277.772679c-105.378851 155.935101-63.227311 369.167287 93.859705 475.271417a344.635773 344.635773 0 0 0 193.180339 59.046287 341.180029 341.180029 0 0 0 225.177966-84.601725l160.244116 160.244115a21.246424 21.246424 0 0 0 30.163096 0 21.331751 21.331751 0 0 0 0-30.163096"
                    p-id="3784"></path>
            </svg>
        </a>
    </div>


</body>

</html>